import React, { useState } from "react";
import "./index.css";
export default function Item({ todo, done ,todoList,id,setTodoList}) {

  const [isActive , setIsActive] = useState(false)

  const mouseHandle = (off) => {
    return () => {
      setIsActive(off)
    }
  }

  const checkChangeHandle = (e) =>{
    const newTodo = todoList.map(item => {
      if(item.id === id){
        item.done = e.target.checked
      }
      return item
    })
    setTodoList(newTodo)
  }
  //删除逻辑
  const deleteTodo = () =>{
    setTodoList(todoList.filter(item => {
      return item.id !=id
    }))
  }

  return (
    <div>
      <li onMouseEnter={mouseHandle(true)} onMouseLeave = {mouseHandle(false)} className={isActive ? "active" : ""}>
        <label>
          <input type="checkbox" checked = {done} onChange = {checkChangeHandle}/>
          <span>{todo}</span>
        </label>
        <button className="btn btn-danger" style={{ display: isActive ? 'block' : 'none' }} onClick = {deleteTodo} >
          删除
        </button>
      </li>
    </div>
  );
}
